<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'

export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3"],
      chart: null
    }
  },
  computed: {

    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        backgroundColor: "#FFF",
        color: this.color,
        // 提示框组件
        tooltip: {
          // 触发类型
          trigger: "axis",
          // 提示框添加单位  默认无单位
          formatter(p) {
            var y_name = p[0].name
            p.forEach((item, index) => {
              if (index === that.origin.length) {
                return
              }
              y_name += `<p>${item.marker}功率因数：${
                item.value === undefined ? "-" : item.value
                } </p>`
            })
            return y_name
          },
          //   axisPointer: {
          //   show: true,
          //   type: 'cross',
          //   lineStyle: {
          //     type: 'dashed',
          //     width: 1
          //   }
          // }
        },

        // 直角坐标系内绘图网格
        grid: {
          top: 20,
          // grid 组件离容器左侧的距离。默认10%
          left: 50,
          // grid 组件离容器右侧的距离。默认10%
          right: 50,
          // grid 组件离容器下侧的距离。默认60px。值可以是像60这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          bottom: 80
        },
        dataZoom: [
          {
            show: true,
            height: 50,
            bottom: 0,
            start: 50,
            end: 100,
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#999"
            }
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 0,
            end: 6
          }
        ],
        // 图例组件。
        // legend: {
        //   // 图例标记的图形宽度。默认25px
        //   itemWidth: 20,
        //   // 图例标记的图形高度。默认14px
        //   itemHeight: 10,
        //   // 图例的公用文本样式。
        //   textStyle: {
        //     // 文字颜色
        //     color: "#90979c",
        //     // 文字大小
        //     fontSize: "12"
        //   },
        //   // 图例的数据数组
        //   data: that.origin ? that.origin.map((item, index) => {
        //     return { name: item.metricName, icon: "roundRect" }
        //   }) : []
        // },
        // dataZoom 组件 用于区域缩放
        // dataZoom: [
        //   // 滑动条型数据区域缩放组件
        //   {
        //     show: true,
        //     type: "slider",
        //     // 滚动条高度
        //     height: 50,
        //     // 滚动条近距离底部距离
        //     bottom: 0,
        //     // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。默认0
        //     start: 0,
        //     // 数据窗口范围的结束百分比。范围是：0 ~ 100。默认100
        //     end: 100,
        //     // 手柄的样式配置
        //     handleStyle: {
        //       // 手柄颜色 默认#a7b7cc
        //       color: "#000000"
        //     },
        //     // 文字样式
        //     textStyle: {
        //       //  文字的颜色 默认#333
        //       color: "#000000"
        //     }
        //   },
        //   // 内置型数据区域缩放组件
        //   {
        //     type: "inside"
        //   }
        // ],
        // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
        xAxis: [
          {
            // 是否显示
            show: true,
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            // 坐标轴类型
            type: "category",
            // 坐标轴轴线相关设置
            axisLine: {
              // 坐标轴样式
              lineStyle: {
                // 坐标轴颜色
                color: "#999"
              }
            },
            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            },
            // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
            // boundaryGap: false,
            // 坐标轴刻度标签的相关设置
            axisLabel: {
              // 坐标轴刻度颜色
              color: "#999"
            },
            // 类目数据，在类目轴（type: 'category'）中有效
            data: that.origin ? that.origin.map((item, index) => {
              return item.time
            }) : null
          }
        ],
        // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
        yAxis: [
          {
            // 坐标轴名称。
            // name: "个",
            // // 坐标轴名称的文字样式。
            // nameTextStyle: {
            //   padding: [0, 20, 20, 0]
            // },
            // 坐标轴类型
            type: "value",
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            max: 1,
            // min:0,
            // 坐标轴在 grid 区域中的分隔线
            splitLine: {
              // 是否显示
              show: true,
              lineStyle: {
                color: "#e5e5e5",
                //分隔线的类型 可选'solid' 'dashed''dotted'
                type: "dotted"
              }
            },
            // 坐标轴轴线相关设置。
            axisLine: {
              // 是否显示
              show: false,
              lineStyle: {
                // 坐标轴线线的颜色。
                color: "#999"
                // 坐标轴线线的宽度
                // width: 1
              }
            },
            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            }
          }
        ],
        visualMap: {
          top: 10,
          right: 10,
          pieces: [{
            lt: 0.899999,

            color: '#DD3E5F'
          }, {
            gt: 0.9,
            color: '#44D428'
          }],
          show: false

        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: {
          markLine: {
            symbol: "none",
            lineStyle: {
              normal: {
                color: "#666",
                type: "solid",
                label: {
                  show: true
                }
              }
            },
            data: [
              { yAxis: 0.9 }
            ]
          },
          // 折线/面积图
          type: "line",
          // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
          name: '',
          // 是否平滑曲线显示
          smooth: true,
          // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
          showSymbol: false,
          // 区域填充样式
          // areaStyle: {
          //   normal: {
          //     color: new echarts.graphic.LinearGradient(
          //       0,
          //       0,
          //       0,
          //       1,
          //       [
          //         {
          //           offset: 0,
          //           color: this.r_color[index].a
          //         },
          //         {
          //           offset: 0.5,
          //           color: this.r_color[index].b
          //         },
          //         {
          //           offset: 1,
          //           color: "rgba(255, 255, 255, 0)"
          //         }
          //       ],
          //       false
          //     ),
          //     shadowColor: "rgba(0, 0, 0, 0.1)",
          //     shadowBlur: 10
          //   }
          // },
          // 系列中的数据内容数组。数组项通常为具体的数据项。
          data: that.origin ? that.origin.map((item, index) => {
            return item.value
          }) : null
        }
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
    rgba_color(color) {
      var color_arr = []
      for (let i = 0; i < color.length ;i++) {
        let num = color[i].split("#")[1]
        color_arr.push({
          a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
          b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
            "0x" + num.substr(2, 2)
          )},${parseInt("0x" + num.substr(4, 2))},0.1)`
        })
      }
      return color_arr
    }
  }

}
</script>
